<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="../../scripts/form/FileUploadField.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GroupSummary.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
        <script type="text/javascript" src="../../scripts/selectPantone.js">
        </script>
		<script type="text/javascript" src="../../scripts/selectBiFactory.js">
        </script>
		<script type="text/javascript" src="../../scripts/selectBiFranceCustomer.js">
        </script>
        <script type="text/javascript">
            var abMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.accessorybutton');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
            var colorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
            
            var ctMaterialTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtMaterialType');
            var ctYesnoXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtYesno');
			var ctShapeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtShape');
            var customerXmlLoader = new xmlLoader('../../servlet/BiFranceCustomerServlet?action=5');
            var ctSupplyTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtSupplyType');
            
            var ctMaterialTypeStore;
            var ctYesnoStore;
			var ctShapeStore;
            //var customerStore;
			var holeQuantityStore;
			var measureStore;
			var ctSupplyTypeStore;
            
            var ctMaterialTypeCombo;
			var ctShapeTypeCombo;
            //var customerCombo;
			var holeQuantityCombo;
			var measureCombo
			var ctSupplyTypeCombo;

			var selectedFactory;
            
            var selectPantoneCallback = function(pantone, realColor){
                document.getElementById('pantoneColor').value = pantone;
                document.getElementById('realColor').value = realColor;
                document.getElementById('sampleTable').style['backgroundColor'] = '#' + realColor;
            }
            
			var selectFactoryCallback = function(factoryId, factoryName){
				document.getElementById('factoryId').value = factoryId;
				document.getElementById('factoryNameCN').value = selectedFactory.nameCN;
				document.getElementById('factoryNameEN').value = selectedFactory.nameEN;
				//alert(selectedFactory);
			}
			
			var selectFranceCustomerCallback = function(customerId, customerName, customerDepartment){
				document.getElementById('customerId').value = customerId;
				document.getElementById('customerName').value = customerName;
				document.getElementById('customerDepartment').value = customerDepartment;
			}
			
			var setReference = function(){
				if(ctMaterialTypeCombo.getRawValue() == '' || ctShapeCombo.getRawValue() == '' || holeQuantityCombo.getRawValue() == '' || measureCombo.getRawValue() == ''){
					return;
				}
				var ctMaterialType = ctMaterialTypeCombo.getRawValue();
				var ctShape = ctShapeCombo.getRawValue();
				var maxReferenceIndextXmlLoader = new xmlLoader('../../servlet/BiAccessoryButtonServlet?action=10&ctMaterialType=' + ctMaterialTypeCombo.getValue() + "&ctShapeType=" + ctShapeCombo.getValue() + "&holeQuantity=" + holeQuantityCombo.getValue() + "&measure=" + measureCombo.getValue());
				var maxIndex = maxReferenceIndextXmlLoader.getValueByTagName('item');
				//alert(maxIndex);
				document.getElementById('referenceIndex').value = maxIndex;
				var reference  = 'BT-' + ctMaterialType.substring(ctMaterialType.indexOf(' = ') + 3) + '-' + ctShape.substring(ctShape.length-2) + '-' + holeQuantityCombo.getValue()  + '-' + measureCombo.getValue() + '-' + maxIndex;
				//if(Ext.getCmp('customerReference').getValue() != ''){
				//	reference += ' = ' + Ext.getCmp('customerReference').getValue();
				//}
				document.getElementById('reference').value = reference;
			}
			
			var onIsSpecialSet = function(){
				var ctSupplyType = ctSupplyTypeCombo.getValue();
				if(ctSupplyType == '01'){
					Ext.getCmp('factoryId').disable();
					Ext.getCmp('factoryNameCN').disable();
					Ext.getCmp('factoryNameEN').disable();
					Ext.getCmp('factoryReference').disable();
					Ext.getCmp('factoryColor').disable();
					
					Ext.getCmp('customerId').enable();
					Ext.getCmp('customerName').enable();
					Ext.getCmp('customerDepartment').enable();
					Ext.getCmp('customerReference').enable();
					Ext.getCmp('customerColor').enable();
				}else if(ctSupplyType == '02'){
					Ext.getCmp('customerId').disable();
					Ext.getCmp('customerName').disable();
					Ext.getCmp('customerDepartment').disable();
					Ext.getCmp('customerReference').disable();
					Ext.getCmp('customerColor').disable();

					Ext.getCmp('factoryId').enable();
					Ext.getCmp('factoryNameCN').enable();
					Ext.getCmp('factoryNameEN').enable();
					Ext.getCmp('factoryReference').enable();
					Ext.getCmp('factoryColor').enable();
				}else{
                	Ext.getCmp('customerId').disable();
                    Ext.getCmp('customerName').disable();
                    Ext.getCmp('customerDepartment').disable();

                    Ext.getCmp('factoryId').disable();
                    Ext.getCmp('factoryNameCN').disable();
                    Ext.getCmp('factoryNameEN').disable();
                    Ext.getCmp('factoryReference').disable();
					Ext.getCmp('factoryColor').disable();
                }
			}
			
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                
                var idValue = getPrarmeterValue(window.location, 'id');
                var startPage = getPrarmeterValue(window.location, 'startPage');
                
                ctMaterialTypeStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, ['code', 'description']),
                    data: ctMaterialTypeXmlLoader.getXml()
                });
				
				ctShapeStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, ['code', 'description']),
                    data: ctShapeXmlLoader.getXml()
                });
                
                ctYesnoStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, ['code', 'description']),
                    data: ctYesnoXmlLoader.getXml()
                });

                ctSupplyTypeStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        // records will have an "Item" tag
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, ['code', 'description']),
                    data: ctSupplyTypeXmlLoader.getXml()
                });
                
//                customerStore = new Ext.data.Store({
//                    reader: new Ext.data.XmlReader({
//                        record: 'item',
//                        id: 'id',
//                        totalRecords: 'itemTotal'
//                    }, ['id', 'name', 'department']),
//                    data: customerXmlLoader.getXml()
//                });
				
				holeQuantityStore = new Ext.data.SimpleStore({
					fields : ['value'],
					data : [[1],[2],[3],[4],[5],[6],[7],[8]]
				});
				
				measureStore = new Ext.data.SimpleStore({
					fields : ['value'],
					data : [[8],[9],[10],[11],[12],[13],[14],[15], [16],[17],[18],[19],[20],[21],[22],[23],[24],[25],[26],[27],[28],[29],[30]]
				});
				
                
                ctMaterialTypeCombo = new Ext.form.ComboBox({
                    fieldLabel: message.get('message.edit.materialtype'),
                    id: 'ctMaterialType',
                    name: 'ctMaterialType',
                    allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctMaterialTypeStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
					anchor: '90%',
                    mode: 'local',
					listeners: {
						select: {
							fn: function (thisCombo, record,index){
								setReference();
							}
						}
					}
                });
                
                ctSupplyTypeCombo = new Ext.form.ComboBox({
                    fieldLabel: message.get('message.edit.buyer'),
                    id: 'ctSupplyType',
                    name: 'ctSupplyType',
                    allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctSupplyTypeStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local',
                    listeners: {
                        select: {
                            fn: function(thisCombo, record, index){
                                onIsSpecialSet();
                            }
                        }
                    }
                });
				
				ctShapeCombo = new Ext.form.ComboBox({
                    fieldLabel: abMessage.get('ui.accessorybutton.shape'),
                    id: 'ctShape',
                    name: 'ctShape',
                    allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctShapeStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
					anchor: '90%',
                    mode: 'local',
					listeners: {
						select: {
							fn: function (thisCombo, record,index){
								setReference();
							}
						}
					}
                });
                
//                customerCombo = new Ext.form.ComboBox({
//                    fieldLabel: message.get('message.edit.customername'),
//                    id: 'customerId',
//                    name: 'customerId',
//                    tpl: '<tpl for="."><div class="x-combo-list-item">{name}&nbsp;&nbsp;--&nbsp;&nbsp;{department}</div></tpl>',
//                    valueField: 'id',
//                    typeAhead: true,
//					allowBlank: false,
//                    store: customerStore,
//                    displayField: 'name',
//                    forceSelection: true,
//                    triggerAction: 'all',
//                    emptyText: message.get('message.combo.pleaseselect'),
//                    selectOnFocus: true,
//                    mode: 'local'
//                });
				
				holeQuantityCombo = new Ext.form.ComboBox({
                    fieldLabel: abMessage.get('ui.accessorybutton.hole'),
                    id: 'holeQuantity',
                    name: 'holeQuantity',
					valueField: 'value',
					displayField: 'value',
					allowBlank: false,
                    typeAhead: true,
                    store: holeQuantityStore,
                    forceSelection: true,
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
					anchor: '90%',
                    mode: 'local',
					listeners: {
						select: {
							fn: function (thisCombo, record,index){
								setReference();
							}
						}
					}
                });
				
				measureCombo = new Ext.form.ComboBox({
                    fieldLabel: abMessage.get('ui.accessorybutton.measure'),
                    id: 'measure',
                    name: 'measure',
					valueField: 'value',
					displayField: 'value',
					allowBlank: false,
                    typeAhead: true,
                    store: measureStore,
                    forceSelection: true,
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local',
					anchor: '90%',
					listeners: {
						select: {
							fn: function (thisCombo, record,index){
								setReference();
							}
						}
					}
                });
                
                var accessoryButtonForm = new Ext.FormPanel({
                    fileUpload: true,
                    labelAlign: 'left',
                    url: '../../servlet/BiAccessoryButtonServlet?action=1',
                    frame: true,
                    title: abMessage.get('ui.accessorybutton.edittitle'),
                    bodyStyle: 'padding:5px 5px 5px 5px;margin-top: 2px;',
                    width: '100%',
                    labelWidth: 105,
                    reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    }, {
                        name: 'photo1Name',
                        mapping: 'photo1Name'
                    }, {
                        name: 'photo2Name',
                        mapping: 'photo2Name'
                    }, {
                        name: 'photo3Name',
                        mapping: 'photo3Name'
                    }, {
                        name: 'reference',
                        mapping: 'reference'
                    }, {
                        name: 'customerReference',
                        mapping: 'customerReference'
                    }, {
                        name: 'factoryReference',
                        mapping: 'factoryReference'
                    }, {
                        name: 'ctShape',
                        mapping: 'ctShape'
                    }, {
                        name: 'measure',
                        mapping: 'measure'
                    }, {
                        name: 'realColor',
                        mapping: 'realColor'
                    }, {
                        name: 'customerColor',
                        mapping: 'customerColor'
                    }, {
                        name: 'factoryColor',
                        mapping: 'factoryColor'
                    }, {
                        name: 'comment',
                        mapping: 'comment'
                    }, {
                        name: 'ctMaterialType',
                        mapping: 'ctMaterialType'
                    }, {
                        name: 'ctSupplyType',
                        mapping: 'ctSupplyType'
                    }, {
                        name: 'customerId',
                        mapping: 'customerId'
                    }, {
                        name: 'factoryId',
                        mapping: 'factoryId'
                    },{
						name: 'customerName',
						mapping: 'customerName'
					},{
						name: 'customerDepartment',
						mapping: 'customerDepartment'
					}, {
                        name: 'factoryNameCN',
                        mapping: 'factoryNameCN'
                    }, {
                        name: 'factoryNameEN',
                        mapping: 'factoryNameEN'
                    }, {
                        name: 'holeQuantity',
                        mapping: 'holeQuantity'
                    }, {
                        name: 'referenceIndex',
                        mapping: 'referenceIndex'
                    }]),
                    //reader: msItemXMLReader,
                    items: [{
                        id: 'id',
                        name: 'id',
                        xtype: 'hidden'
                    }, {
                        id: 'photo1Name',
                        name: 'photo1Name',
                        xtype: 'hidden'
                    }, {
                        id: 'photo2Name',
                        name: 'photo2Name',
                        xtype: 'hidden'
                    }, {
                        id: 'photo3Name',
                        name: 'photo3Name',
                        xtype: 'hidden'
                    }, {
                        id: 'factoryId',
                        name: 'factoryId',
                        xtype: 'hidden'
                    },{
						id: 'customerId',
						name: 'customerId',
						xtype: 'hidden'
					}, {
                        id: 'referenceIndex',
                        name: 'referenceIndex',
                        xtype: 'hidden'
                    }, ctSupplyTypeCombo, {
                        layout: 'column',
                        items: [{
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
										id: 'customerName',
	                                    name: 'customerName',
	                                    fieldLabel: message.get('message.edit.customername'),
	                                    xtype: 'textfield',
	                                    anchor: '90%',
										width: '90%',
	                                    allowBlank: false,
	                                    blankText: message.get('message.edit.noblank'),
										emptyText: message.get('message.combo.pleaseselect'),
										readOnly: true,
	                                    maxLength: 64,
										listeners: {
	                                        'render': {
	                                            fn: function(){
	                                                Ext.getCmp('customerName').getEl().on('click', function(){
	                                                    selectFranceCustomer(selectFranceCustomerCallback);
	                                                }, this);
	                                            },
	                                            scope: this
	                                        }
	                                    }
	                                },{
										id: 'factoryNameCN',
	                                    name: 'factoryNameCN',
	                                    fieldLabel: fMessage.get('ui.factory.name'), 
	                                    xtype: 'textfield',
	                                    anchor: '90%',
										width: '90%',
	                                    allowBlank: false,
	                                    blankText: message.get('message.edit.noblank'),
										emptyText: message.get('message.combo.pleaseselect'),
										readOnly: true,
	                                    maxLength: 64,
										listeners: {
	                                        'render': {
	                                            fn: function(){
	                                                Ext.getCmp('factoryNameCN').getEl().on('click', function(){
	                                                    selectFactory(selectFactoryCallback);
	                                                }, this);
	                                            },
	                                            scope: this
	                                        }
	                                    }
	                                },ctMaterialTypeCombo,measureCombo]
                        }, {
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
		                        xtype: 'textfield',
		                        fieldLabel: fcMessage.get('ui.francecustomer.department'),
		                        id: 'customerDepartment',
		                        name: 'customerDepartment',
		                        anchor: '86%',
		                        allowBlank: true,
		                        blankText: message.get('message.edit.noblank'),
								readOnly: true,
		                        maxLength: 64,
		                        tabIndex: 1
		                    },{
								id: 'factoryNameEN',
                                name: 'factoryNameEN',
                                fieldLabel: fMessage.get('ui.factory.name'),
                                hideLabel:true, 
                                xtype: 'textfield',
                                anchor: '65%',
								width: '65%',
                                allowBlank: false,
								readOnly: true
                            },ctShapeCombo]
                        }, {
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
		                        xtype: 'textfield',
		                        fieldLabel: message.get('message.edit.customerreference'),
		                        id: 'customerReference',
		                        name: 'customerReference',
		                        anchor: '86%',
		                        allowBlank: false,
		                        blankText: message.get('message.edit.noblank'),
		                        maxLength: 64,
		                        tabIndex: 1
		                    },{
		                        xtype: 'textfield',
		                        fieldLabel: message.get('message.edit.factoryreference'),
								id: 'factoryReference',
		                        name: 'factoryReference',
		                        anchor: '86%',
		                        allowBlank: false,
		                        blankText: message.get('message.edit.noblank'),
		                        maxLength: 64,
		                        tabIndex: 1
		                    },holeQuantityCombo]
                        }, {
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
                                id: 'customerColor',
                                name: 'customerColor',
                                fieldLabel: colorMessage.get('ui.pantonecolor.customercolor'),
                                xtype: 'textfield',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                anchor: '86%',
                                width: '90%',
                                maxLength: 64
                            },{
                                id: 'factoryColor',
                                name: 'factoryColor',
                                fieldLabel: colorMessage.get('ui.pantonecolor.factorycolor'),
                                xtype: 'textfield',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                anchor: '86%',
                                width: '90%',
                                maxLength: 64
                            }]
                        }]
                    },{
		                        xtype: 'textfield',
		                        fieldLabel: message.get('message.edit.reference'),
								id: 'reference',
		                        name: 'reference',
		                        anchor: '86%',
		                        allowBlank: false,
		                        blankText: message.get('message.edit.noblank'),
		                        maxLength: 64,
		                        tabIndex: 1,
								listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('reference').getEl().on('click', function(){
                                                    setReference();
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                    },{
						xtype: 'fileuploadfield',
						width: '80%',
			            id: 'photo1',
						name: 'photo1',
			            emptyText: message.get('message.edit.selectimage'),
			            fieldLabel: message.get('message.edit.photo') + '1',
			            buttonCfg: {
			                text: '',
			                iconCls: 'uploadIcon'
		            	}
					},{
						xtype: 'fileuploadfield',
						width: '80%',
			            id: 'photo2',
						name: 'photo2',
			            emptyText: message.get('message.edit.selectimage'),
			            fieldLabel: message.get('message.edit.photo') + '2',
			            buttonCfg: {
			                text: '',
			                iconCls: 'uploadIcon'
		            	}
					},{
						xtype: 'fileuploadfield',
						width: '80%',
			            id: 'photo3',
						name: 'photo3',
			            emptyText: message.get('message.edit.selectimage'),
			            fieldLabel: message.get('message.edit.photo') + '3',
			            buttonCfg: {
			                text: '',
			                iconCls: 'uploadIcon'
		            	}
					}, {
                        fieldLabel: message.get('message.edit.comment'),
                        name: 'comment',
                        xtype: 'textarea',
                        maxLength: 512,
                        width: '90%',
                        maxLengthText: message.get('message.edit.toolong')
                    }],
                    
                    buttons: [{
                        text: message.get('message.edit.save'),
                        handler: function(){
                            if (accessoryButtonForm.getForm().isValid()) {
                            
                            	if(idValue == null){
                            		setReference();
                            	}
                            
                                document.getElementsByName('ctMaterialType')[0].value = ctMaterialTypeCombo.getValue();
                                document.getElementsByName('ctSupplyType')[0].value = ctSupplyTypeCombo.getValue();
                                //document.getElementsByName('customerId')[0].value = customerCombo.getValue();
                                document.getElementsByName('ctShape')[0].value = ctShapeCombo.getValue();
								
                                accessoryButtonForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                                        document.getElementById('photo1-file').value = null;
										document.getElementById('photo2-file').value = null;
										document.getElementById('photo3-file').value = null;
										document.getElementById('photo1').value = null;
										document.getElementById('photo2').value = null;
										document.getElementById('photo3').value = null;
                                        accessoryButtonForm.getForm().reset();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
                    }, {
                        text: message.get('message.edit.reset'),
                        handler: function(){
                            accessoryButtonForm.getForm().reset();
                        }
                    }, {
                        text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'accessory_button_list.html?startPage=' + startPage;
                            }
                            else {
                                window.location = 'accessory_button_list.html';
                            }
                        }
                    }]
                });
                
                accessoryButtonForm.render('accessoryButton');
                
                new Ext.Resizable('customImg', {
                    wrap: true,
                    pinned: true,
                    dynamic: true,
                    handles: 'all',
                    draggable: true
                });
				
				new Ext.Resizable('customImg1', {
                    wrap: true,
                    pinned: true,
                    dynamic: true,
                    handles: 'all',
                    draggable: true
                });
				
				new Ext.Resizable('customImg2', {
                    wrap: true,
                    pinned: true,
                    dynamic: true,
                    handles: 'all',
                    draggable: true
                });
                
                if (idValue != null) {
                    document.getElementById('id').value = idValue;
                    accessoryButtonForm.getForm().load({
                        url: '../../servlet/BiAccessoryButtonServlet?action=3&id=' + idValue,
                        waitMsg: Ext.LoadMask.prototype.msg,
                        success: function(form, action){
                            document.getElementById('customImg').src = '../../_temp/' + document.getElementById('photo1Name').value;
							document.getElementById('customImg1').src = '../../_temp/' + document.getElementById('photo2Name').value;
							document.getElementById('customImg2').src = '../../_temp/' + document.getElementById('photo3Name').value;
							
							onIsSpecialSet();
                        }
                    });
                }
            });
        </script>
    </head>
    <body>
        <div id="accessoryButton">
        </div>
        <img id="customImg" src="../../_temp/noimage.gif" style="position:absolute;left: 10%;width: 250px;"/>
		<img id="customImg1" src="../../_temp/noimage.gif" style="position:absolute;left: 40%;width: 250px;"/>
		<img id="customImg2" src="../../_temp/noimage.gif" style="position:absolute;left: 70%;width: 250px;"/>
    </body>
</html>